<template>
    <div class="wealth">
        <div class="wealth_box">
            <div class="wealth_top">我的钱包</div>
            <div class="wealth_money">
                <yd-countup endnum="0" duration="1" decimals="2" separator="," prefix="￥" ></yd-countup>
            </div>
            <ul class="wealth_ul">
                <li>
                    <div class="wealth_list">七日年化</div>
                    <div class="wealth_list_bot">4.01%</div>
                </li>
                <li>
                    <div class="wealth_list">昨日收益</div>
                    <div class="wealth_list_bot">
                        <yd-countup endnum="0" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
                <li>
                    <div class="wealth_list">年收益</div>
                    <div class="wealth_list_bot">
                        <yd-countup endnum="0" duration="0.1" decimals="2" separator=","></yd-countup>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="wealth_btns">
            <li @click='wealthBtn'>
                <yd-icon name="cunqian" color='#B4A176' custom slot="icon"></yd-icon>
                <div>存钱</div>
            </li>
            <li @click='wealthBtn'>
                <yd-icon name="tixian-" color='#B4A176' custom slot="icon"></yd-icon>
                <div>提现</div>
            </li>
            <li @click='wealthBtn'>
                <yd-icon name="shouzhimingxi" color='#B4A176' custom slot="icon"></yd-icon>
                <div>收益明细</div>
            </li>
        </ul>
        <ul class="wealth_btns">
            <li @click='wealthBtn'>
                <yd-icon name="jiaoyimingxi" color='#B4A176' custom slot="icon"></yd-icon>
                <div>存支明细</div>
            </li>
            <li @click='wealthBtn'>
                <yd-icon name="yinxingqia" color='#B4A176' custom slot="icon"></yd-icon>
                <div>我的银行卡</div>
            </li>
            <li @click='wealthBtn'>
                <yd-icon name="question" color='#B4A176' slot="icon"></yd-icon>
                <div>常见问题</div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'wealth',
    data() {
        return {
            wealth: 'wealth'
        }
    },
    methods: {
        wealthBtn() {
            this.$dialog.toast({
                mes: '敬请期待！',
                timeout: 1000
            });
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wealth_box {
    width: 100%;
    height: 6.4rem;
    color: #fff;
    overflow: hidden;
    background: #B4A176;
}

.wealth_top {
    width: 100%;
    font-size: 0.36rem;
    text-align: center;
    height: 0.6rem;
    margin-top: 0.8rem;
    line-height: 0.5rem;
}

.wealth_money {
    font-size: 0.86rem;
    line-height: 1.2rem;
    font-weight: bold;
    text-align: center;
}

.wealth_ul {
    width: 100%;
    height: auto;
    padding: 0.4rem 0;
    font-weight: 400;
    overflow: hidden;
}

.wealth_list {
    font-size: 0.24rem;
    line-height: 0.5rem;
    font-weight: 400;
}

.wealth_ul li {
    float: left;
    width: 33.3%;
    font-weight: bold;
    text-align: center;
    font-size: 0.36rem;
}

.wealth_btns {
    width: 100%;
    height: auto;
    margin-bottom: 0.4rem;
    font-size: 0.28rem;
    padding-top: 0.2rem;
    border-bottom: 1px solid #EAEAEA;
    overflow: hidden;
}

.wealth_btns li:nth-of-type(2) {
    border-left: 1px solid #EAEAEA;
    border-right: 1px solid #EAEAEA;
}

.wealth_btns li {
    text-align: center;
    width: 33.33%;
    float: left;
    box-sizing: border-box;
    padding-top: 0.2rem;
    color: #4a4a4a;
    height: 1.6rem;
    display: flex;
    -webkit-display: flex;
    flex-direction: column;
}

.wealth_btns li:hover {
    color: #B4A176;
}
</style>